<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <link rel="stylesheet" href="./static/css/common.css" />
    <script src="./static/js/vue.global.js"></script>
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <script src="./static/element-plus/index.full.js"></script>
    <script src="./static/element-plus/icons-vue.js"></script>
  </head>

  <body>
    <div id="app">
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="4" style="height: 60px">
              <img src="./static/images/logo.png" />
              <h1 style="padding: 0 20px">技术社区</h1>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-menu mode="horizontal" :ellipsis="false">
                <el-menu-item index="0">首页</el-menu-item>
                <el-menu-item index="1">文章</el-menu-item>
                <el-menu-item index="2">课程</el-menu-item>
                <el-menu-item index="3">商城</el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-input placeholder="请输入关键字" />
            </el-col>
            <el-col :span="4" v-if="user==null">
              <el-link type="primary" underline="never" href="login.html"
                >登录</el-link
              >
              <el-link type="primary" underline="never" href="register.html"
                >注册</el-link
              >
            </el-col>
            <el-col :span="4" v-else>
              <el-link type="primary" underline="never" href="user.html">
                <el-avatar src="./static/images/avatar.png"></el-avatar>
                <p style="padding: 0 20px">{{user.username}}</p>
              </el-link>
            </el-col>
          </el-row>
        </el-header>
        <el-container class="main" style="padding-top: 10px">
          <el-aside width="240px" style="padding-left: 20px">
            <el-card>
              <el-menu default-active="1" style="border: none">
                <el-menu-item index="1">
                  <el-icon><House /></el-icon>个人主页
                </el-menu-item>
                <el-menu-item index="2"><el-icon><User /></el-icon>个人资料</el-menu-item>
                <el-menu-item index="3"><el-icon><Setting /></el-icon>账号设置</el-menu-item>
                <el-menu-item index="4"><el-icon><Bell /></el-icon>消息设置</el-menu-item>
                <el-menu-item index="5" v-show="user.isAdmin"><el-icon><Monitor /></el-icon>后台管理</el-menu-item>
                <el-menu-item index="6"><el-icon><Collection /></el-icon>退出登录</el-menu-item>
              </el-menu>
            </el-card>
          </el-aside>
          <el-main>
          <el-card style="margin-bottom: 20px">
            <el-row style="display: flex; align-items: center">
              <el-col :span="6" style="text-align: center">
                <el-avatar
                  :size="100"
                  src="../static/images/avatar.png"
                ></el-avatar>
              </el-col>
              <el-col :span="18">
                <h2>{{user.username}}</h2>
                <p>性别：{{user.gender}} | 岗位：{{user.job}}</p>
                <p>签名档：{{user.bio}}</p>
              </el-col>
            </el-row>
          </el-card>
          <el-card>
            <el-tabs>
              <el-tab-pane label="我发布的文章">
                <div v-if="myArticleList.length>0">                
              <ul>
                <li v-for="(item,i) in myArticleList">
                  <p>{{item.title}}</p>
                  <el-text size="small" type="success">{{item.date}}</el-text>
                </li>
              </ul></div>
                <el-empty v-else description="暂无数据" />
              </el-tab-pane>
              <el-tab-pane label="我收藏的文章">
                <div v-if="articleList.length>0">                  
              <ul>
                <li v-for="(item,i) in articleList">
                  <p>{{item.title}}</p>
                  <el-text size="small" type="success">{{item.date}}</el-text>
                </li>
              </ul>
                </div>
                <el-empty v-else description="暂无数据" />
              </el-tab-pane>
              <el-tab-pane label="我收藏的课程">
                <div v-if="courseList.length>0">
              <ul>
                <li v-for="(item,i) in courseList">
                  <p>{{item.title}}</p>
                  <el-text size="small" type="success">￥{{item.price}}</el-text>
                </li>
              </ul>
            </div>
                <el-empty v-else description="暂无数据" />
              </el-tab-pane>
              <el-tab-pane label="我收藏的商品">
                <div v-if="productList.length>0">
                  
              <ul>
                <li v-for="(item,i) in productList">
                  <p>{{item.name}}</p>
                  <el-text size="small" type="success">￥{{item.price}}</el-text>
                </li>
              </ul>
                </div>
                <el-empty v-else description="暂无数据" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-main>
        </el-container>
        <el-footer>
          <el-row>
            <el-col :sm="24" :lg="8">
              <div>
                <img src="./static/images/logo.png" alt="logo" />
              </div>
              <div>
                <h1>技术社区</h1>
                <p>致力于构建一个专业的IT技术交流社区</p>
              </div>
            </el-col>
            <el-col :sm="24" :lg="8">
              <div>
                <el-button type="text">首页</el-button>
                <el-button type="text">文章</el-button>
                <el-button type="text">课程</el-button>
                <el-button type="text">商城</el-button>
              </div>
              <div>
                <el-button type="text">关于我们</el-button>
                <el-button type="text">使用手册</el-button>
                <el-button type="text">隐私条款</el-button>
                <el-button type="text">建议反馈</el-button>
              </div>
            </el-col>
            <el-col :sm="24" :lg="8">
              <div>
                <h2>联系我们</h2>
                <p>电话：123456789</p>
                <p>邮箱：software@develop.com</p>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <p style="margin: 20px 0">软件开发工作室版权所有</p>
          </el-row>
        </el-footer>
      </el-container>
    </div>
    <script>
      const App = {
        data() {
          return {
            user: {
              username: "admin",
              gender: "男",
              hobby: [],
              job: "前端开发工程师",
              bio: "代码千万行，注释第一行；开发不规范，同事泪两行。",
              isAdmin: true,
            },
            myArticleList:[],
            // 文章列表
            articleList: [
              { title: "Vue3.0新特性使用攻略", date: "2024-10-28" },
              { title: "Vite脚手架使用详解", date: "2024-10-25" },
              { title: "ElementPlus框架应用场景", date: "2024-10-17" },
              { title: "5款独立开发者必备神器", date: "2024-10-12" },
            ],
            // 课程列表
            courseList: [
              { title: "零基础学JavaScript", price: 49 },
              { title: "Vue.js从入门到实战", price: 199 },
              { title: "深入浅出状态管理", price: 29 },
              { title: "说透大厂前端项目场景面试题", price: 69 },
            ],
            // 商品列表
            productList: [
              {
                type: "T恤",
                name: "蓝字魔法，解锁IT新风尚——百搭T恤衫",
                price: 12,
                stock: 100,
                img: "./static/images/product03.png",
              },
              {
                type: "U盘",
                name: "IT达人必备：128GB紫色技术社区U盘",
                price: 39,
                stock: 80,
                img: "./static/images/product04.png",
              },
              {
                type: "笔记本",
                name: "高端皮质IT笔记本，简约设计尽显专业气质",
                price: 29,
                stock: 30,
                img: "./static/images/product05.png",
              },
            ],
          };
        },
      };

      const app = Vue.createApp(App).use(ElementPlus);
      for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component);
      }
      app.mount("#app");
    </script>
  </body>
</html>
